<div class="box">
  <div class="box-header">
    <div class="title">Sliders</div>
    <ul class="box-toolbar">
      <li><span class="label label-red">5</span></li>
    </ul>
  </div>
  <div class="box-content">
    <%= partial "partials/jquery_sliders" %>
  </div>
</div>

<div class="box">
  <div class="box-header">
    <div class="title">Photo Gallery</div>
    <ul class="box-toolbar">
      <li>
        <form class="fill-up" style="width: 100px">
          <label class="input-with-submit">
            <input type="text" placeholder="Search..."/>
            <button type="submit" class="submit-icon">
              <i class="icon-search"></i>
            </button>
          </label>
        </form>
      </li>
    </ul>
  </div>

  <div class="box-content">
    <%= partial "partials/gallery" %>
  </div>
</div>

<div class="row-fluid">

  <div class="span6">
    <%= partial 'partials/accordions' %>

    <div class="box">
      <div class="box-header">
        <span class="title">Growl</span>
        <ul class="box-toolbar">
          <li>
            <input class="iButton-icons" type="checkbox" />
          </li>
        </ul>
      </div>

      <div class="box-content padded">
        <a class="growl-info btn btn-blue" href="#">Info</a>
        <a class="growl-success btn btn-green" href="#">Success</a>
        <a class="growl-warn btn btn-gray" href="#">Warning</a>
        <a class="growl-error btn btn-red" href="#">Error</a>
      </div>
    </div>

    <div class="box">

      <div class="box-header">
        <ul class="nav nav-tabs nav-tabs-left">
          <li class="active"><a href="#labels" data-toggle="tab">Labels</a></li>
          <li><a href="#badges" data-toggle="tab">Badges</a></li>
        </ul>
      </div>

      <div class="box-content padded">
        <div class="tab-content">
          <div class="tab-pane active" id="labels">
            <% %w(blue gray green red dark-red black).each_with_index do |color, index| %>
                <span style="margin-right: 10px" class="label label-<%= color %>"><%= (index + 2)*5 %></span>
            <% end %>
          </div>
          <div class="tab-pane" id="badges" style="padding: 5px">
            <% %w(blue gray green red dark-red black).each_with_index do |color, index| %>
                <span style="margin-right: 10px" class="badge badge-<%= color %>"><%= (index + 2)*5 %></span>
            <% end %>
          </div>
        </div>
      </div>
    </div>

    <%= partial 'partials/alerts' %>

    <%= partial 'partials/pagination' %>


  </div>


  <div class="span6">

    <div class="box core-animate-bars">
      <div class="box-header">
        <div class="title">Progress bars</div>
        <ul class="box-toolbar">
          <li class="toolbar-link">
            <a href="#">
              <i class="icon-refresh"></i> Click to randomize bars
            </a>
          </li>
        </ul>
      </div>
      <div class="box-content">
        <% %w(blue green orange black red).each do |color| %>
            <div class="box-section">

              <% types = ["progress-#{color}", "progress-striped progress-#{color}", "progress-striped progress-#{color} active"] %>

              <% types.each do |type| %>
                  <% r = rand(10..60) %>
                  <div class="progress <%= type %>">
                    <div class="bar tip" title="<%= r %>%" data-percent="<%= r %>" style="width: <%= r %>%;"></div>
                  </div>
              <% end %>

            </div>
        <% end %>
      </div>
    </div>

    <div class="box">
      <div class="box-header">
        <span class="title">Tooltips</span>
        <ul class="box-toolbar">
          <li>
            <input class="iButton-icons" type="checkbox" checked="checked" />
          </li>
        </ul>
      </div>

      <div class="box-content padded">
        <a href="#" class="btn btn-green" rel="tooltip" data-placement="top" data-original-title="Tooltip on top">on top</a>
        <a href="#" class="btn btn-green" rel="tooltip" data-placement="right" title="Tooltip on right">on right</a>
        <a href="#" class="btn btn-green" rel="tooltip" data-placement="bottom" title="Tooltip on bottom">on bottom</a>
        <a href="#" class="btn btn-green" rel="tooltip" data-placement="left" title="Tooltip on left">on left</a>
      </div>
    </div>

    <div class="box">
      <div class="box-header">
        <span class="title">Modals with custom content</span>
        <ul class="box-toolbar">
          <li><span class="label label-green">+98</span></li>
        </ul>
      </div>

      <div class="box-content padded">
        <a data-toggle="modal" href="#modal-simple" class="btn btn-blue"><i class="icon-comments-alt"></i> Simple modal</a>
        <a data-toggle="modal" href="#modal-form" class="btn btn-blue"><i class="icon-external-link"></i> Modal with form</a>
        <a data-toggle="modal" href="#modal-tables" class="btn btn-blue"><i class="icon-table"></i> Modal with tables</a>
      </div>
    </div>

    <div class="box">
      <div class="box-header">
        <ul class="nav nav-tabs nav-tabs-left">
          <li class="active"><a href="#home" data-toggle="tab"><i class="icon-home"></i></a></li>
          <li><a href="#messages" data-toggle="tab"><i class="icon-comments-alt"></i> <span>Messages</span></a></li>
          <li><a href="#settings" data-toggle="tab"><i class="icon-cog"></i> <span>Settings</span></a></li>
        </ul>

        <div class="title">Left tabs</div>
      </div>

      <div class="box-content padded">
        <div class="tab-content">
          <div class="tab-pane active" id="home">Going home</div>
          <div class="tab-pane" id="profile">And now to the profile</div>
          <div class="tab-pane" id="messages">No new messages</div>
          <div class="tab-pane" id="settings">Changing the settings</div>
        </div>
      </div>
    </div>

    <div class="box">
      <div class="box-header">
        <div class="title">Right tabs</div>

        <ul class="nav nav-tabs nav-tabs-right">
          <li class="active"><a href="#home2" data-toggle="tab"><i class="icon-home"></i></a></li>
          <li><a href="#messages2" data-toggle="tab"><i class="icon-comments-alt"></i> <span>Messages</span></a></li>
          <li><a href="#settings2" data-toggle="tab"><i class="icon-cog"></i> <span>Settings</span></a></li>
        </ul>

      </div>

      <div class="box-content padded">
        <div class="tab-content">
          <div class="tab-pane active" id="home2">Going home</div>
          <div class="tab-pane" id="profile2">And now to the profile</div>
          <div class="tab-pane" id="messages2">No new messages</div>
          <div class="tab-pane" id="settings2">Changing the settings</div>
        </div>
      </div>
    </div>

  </div>

</div>


<%= partial "partials/modal_simple" %>
<%= partial "partials/modal_form" %>
<%= partial "partials/modal_tables" %>

